'use client'

import { Search } from 'lucide-react'
import { Input } from '@/components/ui/input'
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable'
import { Separator } from '@/components/ui/separator'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { TooltipProvider } from '@/components/ui/tooltip'
import { MailDisplay } from './mail-display'
import { MailList } from './mail-list'
import { useDispatch, useSelector } from 'react-redux'
import { setPaginationConfig, selectCurMention, selectPaginationConfig } from '@/store/mention-slice'

export function Mail({ mentions }) {
  const curMention = useSelector(selectCurMention)
  const paginationConfig = useSelector(selectPaginationConfig)
  const dispatch = useDispatch()

  return (
    <TooltipProvider delayDuration={0}>
      <ResizablePanelGroup
        direction="horizontal"
        onLayout={sizes => {
          document.cookie = `react-resizable-panels:layout=${JSON.stringify(sizes)}`
        }}
        className="h-full max-h-[800px] items-stretch"
      >
        <ResizablePanel defaultSize={50} minSize={30}>
          <Tabs
            defaultValue={paginationConfig.replyType}
            onValueChange={e => {
              dispatch(setPaginationConfig({ ...paginationConfig, currentPage: 1, replyType: e }))
            }}
          >
            <div className="flex items-center px-4 py-2">
              <TabsList className="mr-auto">
                <TabsTrigger value="all" className="text-zinc-600 dark:text-zinc-200">
                  All
                </TabsTrigger>
                <TabsTrigger value="notReplied" className="text-zinc-600 dark:text-zinc-200">
                  Not Replied
                </TabsTrigger>
                <TabsTrigger value="replied" className="text-zinc-600 dark:text-zinc-200">
                  Replied
                </TabsTrigger>
              </TabsList>
            </div>
            <Separator />
            <div className="bg-background/95 p-4 backdrop-blur supports-[backdrop-filter]:bg-background/60">
              <form>
                <div className="relative">
                  <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                  <Input placeholder="Search" className="pl-8" />
                </div>
              </form>
            </div>
            <TabsContent value="all" className="m-0">
              <MailList items={mentions} />
            </TabsContent>
            <TabsContent value="notReplied" className="m-0">
              <MailList items={mentions} />
            </TabsContent>
            <TabsContent value="replied" className="m-0">
              <MailList items={mentions} />
            </TabsContent>
          </Tabs>
        </ResizablePanel>
        <ResizableHandle withHandle />
        <ResizablePanel>
          <MailDisplay mail={mentions.find(item => item.id === curMention.selected) || null} />
        </ResizablePanel>
      </ResizablePanelGroup>
    </TooltipProvider>
  )
}
